<template>
	<view>
		<view class="view-header pad20">
			<view class="head-top flex-cc">
				<view class="flex-ccc border-r">
					<view class="head-text">
						总累计收入（元）
					</view>
					<view class="left-text">
						1234
					</view>
				</view>
				<view class="flex-ccc">
					<view class="head-text">
						本月累计收入（元）
					</view>
					<view class="right-text">
						1234
					</view>
				</view>
			</view>
			<view class="head-bot flex-cc pad-t20">
				<view class="zd-view flex-cc" @tap="navTo('billList/billList')">
					账单明细
				</view>
			</view>
		</view>
		
		
		<view class="data-view pad20 mar-t20">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text> 店铺营收
				</view>
			</view>
			<view class="flex-cb title-text time-view pad20">
				<text>单位</text>
				<text>2019/08</text>
			</view>
			<!-- uCharts -->
			<view class="qiun-charts">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasMix" id="canvasMix" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix" @touchend="touchEndMix"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix" @touchend="touchEndMix"></canvas>
				<!--#endif-->
			</view>
			
			<view class="flex-ca pad-t20">
				<view class="flex-ccc">
					<view class="head-text">
						月成交订单笔数
					</view>
					<view class="data-text">
						545
					</view>
				</view>
				<view class="flex-ccc">
					<view class="head-text">
						月收入金额（元）
					</view>
					<view class="data-text">
						3264.00
					</view>
				</view>
			</view>
		</view>
		
		<view class="data-view pad20 mar-t20">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text> 销售排行
				</view>
			</view>
			<view class="rank-view">
				<view class="flex-cs title-text">
					<text>商品</text>
					<text>金额(元)</text>
					<text>占比量</text>
				</view>
				<view class="flex-cb text-view">
					<text>洗手液</text>
					<text>2000</text>
					<text>40%</text>
				</view>
				<view class="flex-cb text-view">
					<text>洗手</text>
					<text>200</text>
					<text>40%</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../../components/u-charts/u-charts.js';
	
	var _self;
	var canvasObj = {};
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				tips: '',
				pixelRatio: 1,
				serverData: '',
				sliderMax: 50
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			console.log(_self.pixelRatio);
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			console.log(this.cWidth,"cWidth")
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			navTo:function(url){
				uni.navigateTo({
					url
				});
			},
			getServerData() {
				uni.showLoading({
					title: "正在加载数据..."
				})
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/hello-uniapp-ucharts-data.json',
					data: {},
					success: function(res) {
						console.log("数据",res.data)
						_self.fillData(res.data);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			fillData(data) {
				this.serverData = data;
				this.tips = data.tips;
				this.sliderMax = data.Candle.categories.length;
				console.log(data.Mix.series,"series")
				let Mix = {
					categories: ['01','02','03','04','05','06','07','08','09','10','11','12'],
					series: [
						{data:[100,120,130,130,150,180,150,120,90,150,170,150],
						legendShape: "rect",
						name: "柱1",
						pointShape: "circle",
						show: true,
						type: "column",
						color: "#2675F5"
						},
						{data:[100,120,130,130,150,180,150,120,90,150,170,150],
						legendShape: "rect",
						name: "折线",
						pointShape: "circle",
						style: "curve",
						show: true,
						type: "line",
						color: "#2675F5"
						},
					]
				};
				// console.log(data.Mix.categories,"categories")
				// Mix.categories = data.Mix.categories;
				//Mix.series = data.Mix.series;
				//console.log(Mix.series,"mix")
				this.showMix("canvasMix", Mix);
			},
			showMix(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'mix',
					fontSize:11,
					padding:[10,10,0,10],
					legend:{
						show:true,
						padding:4,
						lineHeight:10,
						margin:5,
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:4,
						scrollShow:true,
						scrollAlign:'left',
					},
					yAxis: {
						gridType:'dash',
						dashLength:2,
						splitNumber:5,
						min:40,
						max:180,
						format:(val)=>{return val.toFixed(0)}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
			column:{
			  width:20*_self.pixelRatio
			},
						tooltip:{
							bgColor:'#000000',
							bgOpacity:0.7,
							gridType:'dash',
							dashLength:8,
							gridColor:'#1890ff',
							fontColor:'#FFFFFF',
							horizentalLine:true,
							xAxisLabel:true,
							yAxisLabel:true,
							labelBgColor:'#DFE8FF',
							labelBgOpacity:0.95,
							labelAlign:'left',
							labelFontColor:'#666666'
						}
					},
				});
			},
			touchMix(e) {
				canvasObj['canvasMix'].scrollStart(e);
			},
			moveMix(e) {
				canvasObj['canvasMix'].scroll(e);
			},
			touchEndMix(e) {
				canvasObj['canvasMix'].scrollEnd(e);
		canvasObj['canvasMix'].touchLegend(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasMix'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style>
	
	/*头部*/
.view-header{
	background-color: #FFFFFF;
}
.head-top>view{
	width: 50%;
}
.head-bot{
	
}
.zd-view{
	width:276upx;
	height:56upx;
	border-radius:30px;
	border:2upx solid rgba(38,117,245,1);
	font-size:28upx;
	font-weight:500;
	color:rgba(87,138,255,1);
	line-height:40upx;
}
.head-text{
	font-size:28upx;
	font-weight:600;
	color:rgba(89,89,88,1);
	line-height:40upx;
}
.left-text,.right-text{
	font-size:40upx;
	font-weight:600;
	line-height:56upx;
}
.left-text{
	color:rgba(38,117,245,1);
}
.right-text{
	color:rgba(239,116,0,1);
}

/*数据*/
.data-view{
	background-color: #FFFFFF;
}
.cu-bar{min-height: 1;}
.cu-bar .action:first-child {
    margin-left: 0px;
}

.qiun-charts {
	width: 750upx;
	height: 500upx;
	background-color: #FFFFFF;
}

.charts {
	width: 750upx;
	height: 500upx;
	background-color: #FFFFFF;
}
.time-view>text{
}

.data-text{
	font-size:40upx;
	font-weight:600;
	color:rgba(69,69,69,1);
	line-height:56upx;
}
.rank-view{
	padding: 20upx;
}
.rank-view>view>text{
	width: 33.3%;
	text-align: center;
	padding: 4upx 0;
}
.rank-view>view>text:first-child{
	width: 33.3%;
	text-align: left;
}
.rank-view>view>text:last-child{
	width: 33.3%;
	text-align: right;
}
.text-view,.title-text{
	font-size:26upx;
	font-weight:600;
	line-height:36upx;
}
.title-text{
	color:rgba(124,124,124,1);
}
.text-view{
	color:rgba(60,60,60,1);
}
.text-view>text:last-child{
	color:rgba(38,117,245,1);
}
</style>
